import React, {useState} from 'react';
import { createPortal } from 'react-dom';
import './23-portal.css'

const App = () => {

  const [isShow,setShow] = useState(false)

  const portalHtml = isShow && createPortal(
  <div className='box'>
    <p className='text'>
      弹出的内容
      <button onClick={()=>{
        setShow(false)
      }}>关闭广告</button>
    </p>
  </div>,
  document.querySelector('body'))

  return (
    <div>
      {portalHtml}
      <button onClick={()=>{
        setShow(!isShow)
      }}>切换显示</button>
    </div>
  );
};

export default App;
